<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
a{text-decoration: none; color:#444;}
#banner {
	width:700px;
	height:420px;
	position:relative;
}
#banner ul {
	width:700px;
	height:420px;
	margin:0;
	padding:0;
}
#banner ul li a {
	display:block;
}
#banner ul li {
	position:absolute;
	left:0px;
	top:0px;
}
#banner #num {
	width:100%;
	position:absolute;
	z-index:999;
	left:50%;
	margin-left:-78px;
	top:380px;
}
#banner #num a{
	width:21px;
    height:21px;
    text-align: center;
	border-radius:50%;
	behavior:url(PIE.htc);
	margin-right:5px;
    display:inline-block;
    background-color: #999;
    color: #ffffff;
}
#banner #num a:hover {
	background:#ffffff;
    cursor:pointer;
    color: #000;
}
#banner #num a.on {
    background:#ffffff;
    color: #000;
}


</style>
<script src="./../../jquery代码库/js/jquery.js"></script>
</head>
<body>
        <div id="banner">
                <ul>
                    <li>
                        <a><img height="420" width="700" src="./../images/1.jpg"></a>
                    </li>
                    <li>
                        <a><img height="420" width="700" src="./../images/2.jpg"></a>
                    </li>
                    <li>
                        <a><img height="420" width="700" src="./../images/3.jpg"></a>
                    </li>
                </ul>
                <div id="num">
                    <a href="#" alt="1" class="on">1</a>
                    <a href="#" alt="1" class="">2</a>
                    <a href="#" alt="1" class="">3</a>
                </div>
            </div>
</body>
</html>
<script>
$(function() {

/*轮播图*/
//隐藏第一张以外的图片
$('#banner>ul>li:gt(0)').hide();
var n = 0;
var len = $('#banner ul li').length; //获取的是li的长度 数量
var t;

function play() {
    //alert(n)
    $('#banner ul li').eq(n).show().siblings().hide();
    //给当前的span增加on样式，移除
    $('#num a').eq(n).addClass('on').siblings().removeClass('on');
}

function autoPlay() {
    //自动播放
    t = setInterval(function() {
        //alert(1)	
        n++;
        if (n >= len) {
            n = 0;
        }
        play();
    }, 5000)
}
//alert(len)
autoPlay(); //调用自动播放函数

//鼠标经过banner停止播放，移开继续播放
$('#banner').hover(function() {
    clearInterval(t)
}, function() {
    autoPlay();
})
//点击下一张
$('#next').click(function() {
    n++;
    if (n >= len) {
        n = 0;
    }
    play();
})
//点击上一张
$('#prev').click(function() {
    if (n <= 0) {
        n = len;
    }
    n--;
    play();
})
//点击数字显示相应的图片
$('#num a').each(function(index) {
    //alert(index)
    $(this).click(function() {
        //alert(index)	
        n = index;
        play();
    })
});
})
</script>